<template>
	<el-container>
		<el-aside width="8%" class="nav-bar">
			<div class="logo-container">
				<!-- 分类 -->
				<div class="logo-item" @click="navigation(1)">
					<svg height="50" width="50" class="logo">
						<svg t="1715589930950" class="icon" viewBox="0 0 1024 1024" version="1.1"
							xmlns="http://www.w3.org/2000/svg" p-id="9947" width="50" height="50">
							<path
								d="M575.68 736a160.32 160.32 0 1 0 160.32-160.32H599.893333c-13.461333 0-24.192 10.752-24.192 24.192V736zM736 533.333333A202.666667 202.666667 0 1 1 533.333333 736V599.893333A66.432 66.432 0 0 1 599.872 533.333333H736zM490.666667 736a202.666667 202.666667 0 1 1-202.666667-202.666667h136.128A66.432 66.432 0 0 1 490.666667 599.872V736z m-202.666667-160.32a160.32 160.32 0 1 0 160.32 160.32V599.893333c0-13.44-10.730667-24.192-24.192-24.192H288zM533.333333 287.978667A202.666667 202.666667 0 1 1 736 490.666667H599.893333A66.432 66.432 0 0 1 533.333333 424.128V288z m202.666667 160.341333a160.32 160.32 0 1 0-160.32-160.32v136.128c0 13.44 10.730667 24.192 24.192 24.192H736zM448.32 288a160.32 160.32 0 1 0-160.32 160.32h136.128c13.461333 0 24.192-10.752 24.192-24.192V288zM288 490.666667A202.666667 202.666667 0 1 1 490.666667 288v136.128A66.432 66.432 0 0 1 424.128 490.666667H288z"
								fill="#e6e6e6" p-id="9948"></path>
						</svg>
					</svg>
					<span style="color: #e6e6e6;">分类</span>
				</div>
				<!-- 商品 -->
				<div class="logo-item" @click="navigation(2)">
					<svg height="50" width="50" class="logo">
						<svg t="1715589137588" class="icon" viewBox="0 0 1024 1024" version="1.1"
							xmlns="http://www.w3.org/2000/svg" p-id="5353" width="50" height="50">
							<path
								d="M832 256H640V160.8c0-17.6-14.4-32.8-32.8-32.8H416c-17.6 0-32.8 14.4-32.8 32.8V256H192l-64 576c0 35.2 28.8 64 64 64h640c35.2 0 64-28.8 64-64l-64-576z m-384-64h128v64H448v-64z m326.4 128l56.8 512H192l56.8-512"
								p-id="5354" fill="#e6e6e6"></path>
							<path d="M447.2 352.8H384V416h63.2v-63.2zM640 352.8h-63.2V416H640v-63.2z" p-id="5355"
								fill="#e6e6e6"></path>
						</svg>
					</svg>
					<span style="color: #e6e6e6;">商品</span>
				</div>
				<!-- 订单 -->
				<div class="logo-item" @click="navigation(3)">
					<svg height="50" width="50" class="logo">
						<svg t="1715589228580" class="icon" viewBox="0 0 1024 1024" version="1.1"
							xmlns="http://www.w3.org/2000/svg" p-id="6429" width="50" height="50">
							<path
								d="M800.037628 928.016126 223.962372 928.016126c-52.980346 0-95.983874-43.003528-95.983874-95.983874l0-639.892491c0-52.980346 43.003528-95.983874 95.983874-95.983874l575.903242 0c52.980346 0 95.983874 43.003528 95.983874 95.983874l0 639.892491C896.021502 884.840585 852.84596 928.016126 800.037628 928.016126zM223.962372 159.973123c-17.545439 0-31.994625 14.449185-31.994625 31.994625l0 639.892491c0 17.717453 14.449185 31.994625 31.994625 31.994625l575.903242 0c17.717453 0 31.994625-14.277171 31.994625-31.994625l0-639.892491c0-17.545439-14.277171-31.994625-31.994625-31.994625L223.962372 159.973123z"
								fill="#e6e6e6" p-id="6430"></path>
							<path
								d="M640.924576 544.768688 287.779607 544.768688c-17.717453 0-31.994625-14.277171-31.994625-31.994625 0-17.717453 14.277171-31.994625 31.994625-31.994625l353.144969 0c17.717453 0 31.994625 14.277171 31.994625 31.994625C672.9192 530.491517 658.642029 544.768688 640.924576 544.768688z"
								fill="#e6e6e6" p-id="6431"></path>
							<path
								d="M734.84428 735.532337l-447.236687 0c-17.717453 0-31.994625-14.277171-31.994625-31.994625s14.277171-31.994625 31.994625-31.994625l447.236687 0c17.717453 0 31.994625 14.277171 31.994625 31.994625S752.561734 735.532337 734.84428 735.532337z"
								fill="#e6e6e6" p-id="6432"></path>
							<path
								d="M255.784982 305.325046c0 26.490173 21.501764 47.991937 47.991937 47.991937s47.991937-21.501764 47.991937-47.991937-21.501764-47.991937-47.991937-47.991937S255.784982 278.834873 255.784982 305.325046z"
								fill="#e6e6e6" p-id="6433"></path>
							<path
								d="M463.061986 305.325046c0 26.490173 21.501764 47.991937 47.991937 47.991937s47.991937-21.501764 47.991937-47.991937-21.501764-47.991937-47.991937-47.991937S463.061986 278.834873 463.061986 305.325046z"
								fill="#e6e6e6" p-id="6434"></path>
							<path
								d="M671.199059 305.325046c0 26.490173 21.501764 47.991937 47.991937 47.991937s47.991937-21.501764 47.991937-47.991937-21.501764-47.991937-47.991937-47.991937S671.199059 278.834873 671.199059 305.325046z"
								fill="#e6e6e6" p-id="6435"></path>
						</svg>
					</svg>
					<span style="color: #e6e6e6;">订单</span>
				</div>
				<!-- 我的 -->
				<div class="logo-item" @click="navigation(4)">
					<svg height="50" width="50" class="logo">
						<svg t="1715589429644" class="icon" viewBox="0 0 1024 1024" version="1.1"
							xmlns="http://www.w3.org/2000/svg" p-id="7489" width="50" height="50">
							<path
								d="M586.945923 513.581008c55.067176-27.962865 92.91211-85.125773 92.91211-150.998039 0-93.338828-75.937506-169.276335-169.277358-169.276335s-169.275311 75.937506-169.275311 169.276335c0 65.872267 37.844933 123.034151 92.911086 150.998039-95.652524 32.016181-164.778904 122.45496-164.778904 228.743728 0 11.31572 9.17394 20.491707 20.491707 20.491707s20.491707-9.174963 20.491707-20.491707c0-110.36869 89.791026-200.160739 200.160739-200.160739S710.741413 631.956046 710.741413 742.324736c0 11.31572 9.17394 20.491707 20.491707 20.491707s20.491707-9.174963 20.491707-20.491707C751.723803 636.035968 682.598446 545.598212 586.945923 513.581008zM382.287753 362.582969c0-70.742181 57.552787-128.293945 128.292921-128.293945 70.742181 0 128.293945 57.552787 128.293945 128.293945 0 70.741157-57.552787 128.292921-128.293945 128.292921C439.84054 490.876913 382.287753 433.324126 382.287753 362.582969z"
								fill="#1296db" p-id="7490"></path>
							<path
								d="M827.871087 196.127889C743.498468 111.757317 631.320573 65.290005 512 65.290005S280.500509 111.756293 196.128913 196.127889C111.756293 280.501532 65.291029 392.678404 65.291029 511.998977s46.465265 231.499491 130.837884 315.872111 196.550515 130.837884 315.871087 130.837884 231.498468-46.465265 315.871087-130.837884S958.708971 631.319549 958.708971 511.998977 912.243707 280.500509 827.871087 196.127889zM512 917.726581c-223.718271 0-405.726581-182.007287-405.726581-405.727605 0-223.718271 182.00831-405.726581 405.726581-405.726581s405.726581 182.007287 405.726581 405.726581C917.726581 735.719294 735.718271 917.726581 512 917.726581z"
								fill="#1296db" p-id="7491"></path>
						</svg>
					</svg>
					<span style="color: #1296db;">我的</span>
				</div>
				<!-- 工具 -->
				<div class="logo-item" @click="navigation(5)">
					<svg height="50" width="50" class="logo">
						<svg t="1715589731055" class="icon" viewBox="0 0 1024 1024" version="1.1"
							xmlns="http://www.w3.org/2000/svg" p-id="8858" width="50" height="50">
							<path
								d="M928 257.7H768v-97.4c0-35.3-28.7-64-64-64H320c-35.3 0-64 28.7-64 64v97.4H96c-17.7 0-32 14.3-32 32v606c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32v-606c0-17.7-14.3-32-32-32z m-608-97.4h384v97H320v-97z m576 703.4H128v-271h281v60c0 17.7 14.3 32 32 32h142c17.7 0 32-14.3 32-32v-60h281v271z m-423-243v-120h78v120h-78z m423-92H615v-60c0-17.7-14.3-32-32-32H441c-17.7 0-32 14.3-32 32v60H128v-207h768v207z"
								fill="#e6e6e6" p-id="8859"></path>
						</svg>
					</svg>
					<span style="color: #e6e6e6;">工具</span>
				</div>
			</div>
		</el-aside>
		<el-main>
			<div class="user-info">
				<el-form :model="userInfo" class="user-form" label="用户头像">
					<el-form :model="userInfo" class="user-form">
						<el-form-item class="form-item avatar-container">
							<!-- 头像显示部分 -->
							<img v-if="userInfo.avatar" :src="userInfo.avatar" class="avatar" alt="用户头像">
							<!-- 上传按钮只在未锁定状态时可用 -->
							<el-upload v-if="!lockStatus" class="upload-demo" ref="upload"
								action="http://81.70.99.233:8090/common/upload" :on-success="handleAvatarSuccess"
								:headers="{'Content-Type': 'multipart/form-data'}" :before-upload="beforeAvatarUpload"
								:http-request="uploadAvatar" :show-file-list="false">
								<el-button size="small" type="primary">更换头像</el-button>
							</el-upload>
						</el-form-item>
						<el-form-item label="电话号码 :">
							<el-input v-model="userInfo.tele" :disabled="lockStatus"></el-input>
						</el-form-item>
						<el-form-item label="姓名 :">
							<el-input v-model="userInfo.name" :disabled="lockStatus"></el-input>
						</el-form-item>
						<el-form-item label="密码 :">
							<el-input type="password" v-model="userInfo.password" :disabled="lockStatus"></el-input>
						</el-form-item>
						<el-form-item label="确认密码 :">
							<el-input type="password" v-model="confirmPassword" :disabled="lockStatus"></el-input>
						</el-form-item>
						<el-form-item label="QQ :">
							<el-input v-model="userInfo.qq" :disabled="lockStatus"></el-input>
						</el-form-item>
						<el-form-item label="微信 :">
							<el-input v-model="userInfo.wechat" :disabled="lockStatus"></el-input>
						</el-form-item>
						</el-form-item>
						<el-button type="primary" @click="updateMerchant" :disabled="lockStatus">更新信息</el-button>
						<el-button type="success" @click="toggleLock">{{ lockStatus ? '解除锁定' : '锁定信息' }}</el-button>
					</el-form>
				</el-form>
			</div>


		</el-main>
	</el-container>
</template>


<script>
	import axios from 'axios';
	export default {
		data() {
			return {
				userInfo: {
					id: null,
					tele: null,
					name: null,
					password: null,
					avatar: null,
					qq: null,
					wechat: null,
					status: null,
				},
				lockStatus: false, // 初始锁定状态为未锁定
				confirmPassword: null, // 新增确认密码数据属性
				fileList1: [],
			}

		},
		created() {
			//根据商家id查询商家信息
			this.getMerchantById();
		},
		methods: {
			navigation(num) {
				if (num == 1) {
					this.$router.push('/merchant_index');
				} else if (num == 2) {
					this.$router.push('/merchant_commodity');
				} else if (num == 3) {
					this.$router.push('/merchant_order');
				} else if (num == 4) {
					this.$router.push('/merchant_my');
				} else {
					this.$router.push('/merchant_tool');
				}
			},
			getMerchantById() {
				try {
					const url = "http://81.70.99.233:8090/merchant/getMerchantById";
					const response = axios.get(url, {}).then(
						response => {
							const responseData = response.data;
							this.userInfo = responseData.data;
						});
				} catch (error) {
					console.error('获取商家信息：', error);
				}
			},
			updateMerchant() {
				if (this.lockStatus) return; // 如果锁定，阻止更新操作
				if (!this.userInfo.tele || !this.userInfo.password || !this.userInfo.name ||
					!this.userInfo.avatar || !this.userInfo.qq || !this.userInfo.wechat) {
					this.$message({
						showClose: true,
						message: '请填写必要信息',
						type: 'warning'
					});
				} else if (this.userInfo.password !== this.confirmPassword) {
					this.$message({
						showClose: true,
						message: '两次输入的密码不一致',
						type: 'error'
					});
				} else {
					axios.put('http://81.70.99.233:8090/merchant/updateMerchant', this.userInfo)
						.then(response => {
							this.$message({
								showClose: true,
								message: "更改商户信息成功！",
								type: 'success',
								duration: 5000 // 消息显示5秒
							});
							// 刷新当前页面
							location.reload();
						})
						.catch(error => {
							console.error('更改商户信息失败', error);
						});
				}
			},
			handleAvatarChange(event) {
				const file = event.target.files[0];
				if (!file) {
					this.$message({
						showClose: true,
						message: '请选择一个文件。',
						type: 'warning'
					});
					return;
				}
				this.uploadAvatar(file);
			},
			toggleLock() {
				this.lockStatus = !this.lockStatus;
			},
			triggerFileInput() {
				this.$refs.fileInput.click(); // 触发文件输入的点击事件
			},
			//上传资质图片
			UploadImageToCertificate1(file, filelist) {
				let fd = new FormData()
				fd.append('file', file.raw) //传给后台接收的名字 file
				axios.post('http://81.70.99.233:8090/common/upload', fd, {
					headers: {
						'Content-Type': 'multipart/form-data',
						'token': this.token
					}
				}).then(response => {
					//上传成功后返回的数据,
					console.log(response.data.data);
					// 将图片地址给到表单.
					this.userInfo.avatar = response.data.data
					this.$message({
						message: '图片1上传成功：' + this.userInfo.avatar,
						type: 'success'
					});
				})
			},
			//移除图片功能
			handleRemove1(file, fileList) {
				console.log(file, fileList)
			},
			//预览图片功能
			handlePictureCardPreview1(file) {
				console.log(file.url);

			},
			// 处理文件上传成功
			handleAvatarSuccess(response) {
				// 确保后端响应的code为1，表示成功
				if (response.code === 1) {
					this.userInfo.avatar = response.data; // 更新头像URL到用户信息中
					this.$message({
						message: '头像更新成功',
						type: 'success',
						duration: 3000
					});
				} else {
					this.$message({
						message: response.msg || '头像更新失败', // 使用后端的错误消息或默认消息
						type: 'error',
						duration: 3000
					});
				}
			},
			beforeAvatarUpload(file) {
				const isJPG = file.type === 'image/jpeg';
				const isPNG = file.type === 'image/png';
				const isLt2M = file.size / 1024 / 1024 < 2;
				if (!isJPG && !isPNG) {
					this.$message.error('上传头像图片只能是 JPG 或 PNG 格式!');
					return false;
				}
				if (!isLt2M) {
					this.$message.error('上传头像图片大小不能超过 2MB!');
					return false;
				}
				return isJPG || isPNG && isLt2M;
			},
			uploadAvatar(file) {
				const formData = new FormData();
				formData.append('file', file.file); // 将文件加入到表单数据中
				let config = {
					headers: {
						'Content-Type': 'multipart/form-data'
					}
				};
				return axios.post(file.action, formData, config)
					.then(response => {
						if (response.status === 200) {
							file.onSuccess(response.data, file.file); // 确保响应状态为200
						} else {
							throw new Error('Failed to upload image');
						}
					})
					.catch(error => {
						file.onError(error);
						this.$message.error('头像上传失败');
					});
			},
		}
	}
</script>

<style scoped>
	.el-main {
		background-image: url('https://p0.ssl.qhimgs1.com/t019baa34d013d7d5a4.gif');
		/* 更换为你的GIF图片路径 */
		background-size: cover;
		/* 覆盖整个区域，无重复 */
		background-position: center center;
		/* 使背景图像居中 */
		background-repeat: no-repeat;
		/* 不重复背景图像 */
		min-height: 100vh;
		/* 确保至少有100%视窗高度 */
	}

	.el-container {
		display: flex;
		flex-direction: row; /* // 确保内容是水平排列的 */
		height: 100vh; /* // 设置容器高度为视窗的100% */
		width: 100vw; /* // 设置容器宽度为视窗的100% */
		overflow: hidden; /* // 防止内容溢出时显示滚动条 */
	}

	.el-aside {
		width: 8%; /* // 设置侧边栏宽度为视窗宽度的8% */
		height: 100%; /* // 高度为父容器的100%，这里父容器已经是100vh */
		background-color: #333;/* // 给侧边栏一个背景颜色 */
		display: flex;
		flex-direction: column;
		align-items: center; /* // 水平居中显示 */
		justify-content: center; /* // 垂直居中显示 */
	}

	.nav-bar {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100vh;
		background-color: #333;

		/* 添加阴影 */
	}

	.logo-container {
		flex-grow: 1; /* // 允许logo容器填充剩余空间 */
		display: flex;
		flex-direction: column;
		justify-content: space-evenly; /* // 均匀分配内部元素的间距 */
	}

	.logo-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		cursor: pointer;
		transition: transform 0.3s ease-in-out; /* // 平滑过渡效果 */
	}

	.logo {
		margin-bottom: 5px;
	}

	.user-info {
		padding: 20px;
		/* 添加内边距 */
		background: #fff;
		border-radius: 10px;
		/* 圆角边框 */
		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
		/* 添加阴影 */
		max-width: 800px;
		/* 最大宽度，根据需要调整 */
		margin: 0 auto;
		/* 上下保持原样，左右自动调整使其居中 */
	}

	.user-form .form-item {
		margin-bottom: 0px;

		/* 表单项间距 */
	}

	.avatar {
		width: 100px;
		/* 头像宽度 */
		height: 100px;
		/* 头像高度，确保与宽度相同保持图片为圆形 */
		border-radius: 50%;
		/* 创建圆形头像 */
		object-fit: cover;
		/* 确保图片覆盖整个容器区域，不变形 */
	}

	.avatar-container {
		display: flex;
		/* 使用Flexbox */
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
	}

	.upload-demo {
		margin-left: 10px;
		/* 控制上传按钮的位置 */
	}
</style>